<template>
  <div>
    <h2>App组件标题</h2>
    <HelloWorld ref="refCount"></HelloWorld>

    <button @click="increaseChildCount">增加子组件的count</button>
    <button @click="invokeChildCount">调用子组件的方法</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

const refCount = ref(null)
console.log(refCount)
console.log(refCount.value)

let increaseChildCount = () => {
  refCount.value.count++
}

let invokeChildCount = () => {
  refCount.value.increase()
}
</script>

<style>
p {
  background: #ccc;
}

div {
  border: 1px solid #aaa;
  margin: 20px;
}
</style>
